<template>
  <div>
      <Searchtop/>
      <p class="Stitle">亲们都在找</p>
      <div class="Send">
          <p class="Seone">
              <span>面膜</span>
              <span>防晒</span>
              <span>眼霜</span>
              <span>精华</span>
          </p>
          <p>
              <span>洗面奶</span>
              <span>资生堂</span>
              <span>洗发水</span>
              <span class="Sd">防晒喷雾</span>
          </p>
          <p>
              <span>洗面奶</span>
              <span>资生堂</span>
              <span>洗发水</span>
              <span class="Sd">防晒喷雾</span>
          </p>
      </div>
      <p class="Sres">最近搜索</p>
      <div class="Srecent">
          <p class="Smsg">睫毛膏</p>
          <button class="Smsgbutton">清空搜索历史</button>
          <ul>
		<li v-for="(item,index) in historyList" :key="index" @click="goSearchDetail(item)">{{item}}</li>
	</ul>
      </div>
  </div>
</template>

<script>
import Searchtop from '../ma/Searchtop'
export default {
    name:'Search',
    components:{
        Searchtop,
    },
    data(){
        return{
            search_val: '', //搜索的内容
            historyList: [] //历史搜索记录，存本地
        }
    },
    mounted(){
        //如果本地存储的数据historyList有值，直接赋值给data中的historyList
        if (JSON.parse(localStorage.getItem("historyList"))) {
            this.historyList = JSON.parse(localStorage.getItem("historyList"));
        }
    },
    methods: {
        // 搜索
        get_search(){
        	if(this.search_val == ''){
        		this.$toast('请输入搜索内容');
        		return false;
        	}else{
                // 没有搜索记录，把搜索值push进数组首位，存入本地
                if (!this.historyList.includes(this.search_val)) {
                  this.historyList.unshift(this.search_val);
                  localStorage.setItem("historyList", JSON.stringify(this.historyList));
                }else{
                    //有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
                    let i =this.historyList.indexOf(this.search_val);
                    this.historyList.splice(i,1)
                    this.historyList.unshift(this.search_val);
                    localStorage.setItem("historyList", JSON.stringify(this.historyList));
                }
                // //跳转到搜索结果页
        		// this.$router.push({
        		// 	path: "/list", 
        		// 	query: { 
        		// 		search_val: this.search_val,
        		// 	},
        		// });
        	}
        },
        //清空历史搜索记录
        empty(){
        	this.$toast.success('清空历史搜索成功');
            localStorage.removeItem('historyList');
            this.historyList = [];
        }
    },
    
}
</script>

<style  scoped>
* {
    background: #fff;
}
.Stitle {
    margin-top: 9.6rem;
    font-size: 2.8rem;
    padding: 2.6rem 2rem;
    text-align: left;
    color: #808080;
    background: #f2f2f2;
} 
.Send {
    height: 36rem;
    padding: 2rem 2rem;
    font-size: 2.8rem;
    color: #4d4d4d;
    text-align: left;
}
span {
    height: 3.8rem;
    width: 9.6rem;
    text-align: center;
    border: 1px solid #ccc;
    padding: 0 1.2rem;
    border-radius: 20rem;
    display: inline-block;
    margin-bottom: 2rem;
    margin-right: 2rem;
}
.Sd {
    width: 13.8rem;
}
.Srecent {
   height: 67rem;
}
.Sres {
    padding: 0 2rem;
    text-align: left;
    background: #f2f2f2;
    height: 6rem;
    line-height: 6rem;
    font-size: 2.8rem;
    color: #808080;
}
.Smsg {
    text-align: left;
    padding: 0 2rem;
    border-bottom: 0.1rem solid #ccc;
    height: 8rem;
    line-height: 8rem;
    font-size: 2.8rem;
    color: #4d4d4d;
}
.Smsgbutton {
    margin-top: 3.4rem;
    height: 3.8rem;
    width: 49.8rem;
    border: 1px solid #ccc;
    border-radius: 10rem;
    font-size: 2.4rem;
    color: #959595;
    background: #fff;
}
</style>